<template>
  <view class="page">
    <view class="title-box">
      <view class="title">行程规划中</view>
      <view class="sub-title">定制无奇不有，畅享前所未游。</view>
    </view>

    <tp-plan-req-card
      :plan-id="planId"
      :target="target"
      :start-date="reqStartDate"
      :end-date="reqEndDate"
      :take-days="reqTakeDays"
      :features="reqFeatures"
      :budget="reqBudget"
      :custom="reqCustom"
      :tags="reqTags"
      :show-progress="true"
      :percent="percent"></tp-plan-req-card>
      
    <view class="btn-box">
      <ai-button :block="true" size="lg" variant="outline" @click="onCancelPlanning">终止规划</ai-button>
    </view>

    <view class="trace-card">
      <view class="title-wrapper">
        <ai-icon v-if="percent < 100" type="icon-refresh" :spin="true" :size="20" color="var(--brand-2)"></ai-icon>
        <text class="title">规划生成中，关闭页面后可从「我的规划」中查看</text>
      </view>
      <view class="trace-box">
        <tp-step v-for="(node, idx) in processNodes" 
          :first="node.first" 
          :last="node.last"
          :active="node.active"
          :load="node.load"
          :key="'n-' + idx">
          <tp-step-simple-card 
            :title="node.nodeName" 
            :lines="node.contentLines">
          </tp-step-simple-card>
        </tp-step>
      </view>
    </view>

    <tp-footer></tp-footer>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        planId: 0,
        target: "",
        reqStartDate: "",
        reqEndDate: "",
        reqTakeDays: 0,
        reqBudget: "",
        reqFeatures: {},
        reqCustom: "",
        reqTags: [],
        percent: 0,
        processNodes: [],
        timer: 0,
      };
    },
    onLoad(options) {
      this.planId = options.planId
      this.init()
    },
    onUnload() {
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    methods: {
      init() {
        this.getCreateReq()
        this.queryProcess()
        this.timer = setInterval(() => {
          this.queryProcess()
          if (this.percent >= 100) {
            if (this.timer) {
              clearInterval(this.timer)
            }
            uni.redirectTo({
              url: "/pages/plan/detail?planId=" + this.planId
            })
          }
        }, 1000)
      },
      getCreateReq() {
        let url = this.$urls.getApi("planningReq")
        this.$get(url, {
          data: { planId: this.planId}
        })
        .then(res => {
          let module = res.module
          const { target, startDate, endDate, takeDays, budget, features, custom='', tags=[]} = module
          this.target = target
          this.reqStartDate = startDate
          this.reqEndDate = endDate
          this.reqTakeDays = takeDays
          this.reqBudget = budget
          this.reqFeatures = features
          this.reqCustom = custom
          let len = this.reqTags.length
          this.reqTags.splice(0, len, ...tags)
        })
      },
      queryProcess() {
        let url = this.$urls.getApi("planningProcess")
        this.$get(url, {
          data: { planId: this.planId}
        })
        .then(res => {
          let module = res.module || {}
          const { percent, nodes = [] } = module
          let len = this.processNodes.length
          this.percent = percent
          this.processNodes.splice(0, len, ...nodes)
        })
      },
      onCancelPlanning() {
        uni.showModal({
          content: "你确定需要终止该规划吗？",
          success: (res) => {
            if (res.confirm) {
                this.cancelPlanning()
              } else if (res.cancel) {
              }
          }
        })
      },
      cancelPlanning() {
        let url = this.$urls.getApi("cancelPlan")
        this.$post(url, {
          data: { planId: this.planId}
        })
        .then(res => {
          this.$toast("取消成功")
          uni.redirectTo({
            url: "/pages/plan/start"
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  .page {
    background-image: url(https://www.australia.cn/content/australia/zh_cn/places/perth-and-surrounds/best-beaches/jcr:content/mainParsys/imagewithcaption/LargeImageTile/largeImageSrc.adapt.740.medium.jpg);
    background-repeat: no-repeat;
    background-size: 100% 180px;
    min-height: calc(100vh - 48px);
    
  }
  
  .title-box {
    display: flex;
    text-align: center;
    flex-direction: column;
    margin-top: 20px;
    color: $white;

    .title {
      font-size: 20px;
      font-weight: $font-weight-bold;
      .sub-title {
        font-size: 14px;
      }
    }
  }
  
  .btn-box {
    margin-top: $gutter;
  }
  
  .trace-card {
    margin-top: $gutter;
    box-shadow: var(--shadow-3);
    background: $card-bg;
    border-radius: $card-border-radius;
    
    .title-wrapper {
      display: flex;
      align-items: center;
      min-height: 36px;
      padding: 0 $gutter;
      border-bottom: 1px solid var(--gray-5);
      
      .title {
        padding-left: 6px;
      }
    }
    .trace-box {
      padding: 0 $gutter $gutter;
    }
  }

</style>
